<template>
<!--案件统计-->
<div class="title-block case-analysis-block">
  <div class="title-block-title">
    串并案分析
    <div class="btn-wrap">
      <el-radio-group v-model="timeType">
        <el-radio :label="1">今日</el-radio>
        <el-radio :label="2">本周</el-radio>
        <el-radio :label="3">本月</el-radio>
        <el-radio :label="4">全年</el-radio>
      </el-radio-group>
    </div>
  </div>
  <div class="title-block-content">
    <xdh-charts width="100%" height="100%" :options="chartOpt"></xdh-charts>
  </div>
</div>
</template>

<style lang="scss" scoped>
@import '../../../style/_vars.scss';
@import '../../../style/_mixin.scss';
.case-analysis-block{
  .btn-wrap{
    /deep/ .el-radio+.el-radio{
      margin-left: 10px;
    }
    /deep/ .el-radio__input{
      display: none;
    }
  }
}

</style>

<script>
// import tabPanel from '@/components/common/tab-panel'
import XdhCharts from '@/widgets/xdh-echarts'
export default {
  name: 'caseAnalysis',
  components: {
    // tabPanel,
    XdhCharts
  },
  props: {},
  data() {
    return {
      timeType: '',
      chartOpt: {
        color: ['#3BA1FF', '#4DCB73', '#975FE4'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        legend: {
          data: ['串案', '并案', '串并案']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            data: ['DNA', '指纹', '足迹', '视频', '分析串', '综合串']
          }
        ],
        yAxis: [
          { type: 'value' }
        ],
        series: [
          {
            name: '串案',
            type: 'bar',
            barGap: 0,
            data: [320, 332, 301, 334, 390, 297]
          },
          {
            name: '并案',
            type: 'bar',
            data: [220, 182, 191, 234, 290, 312]
          },
          {
            name: '串并案',
            type: 'bar',
            data: [150, 232, 201, 154, 190, 189]
          }
        ]
      }
    }   
  },
  computed: {
     
  },
  methods: {
    
  },
  mounted() {
  }
}
</script>

